Description

I made a mistake by not testing on scrollable pages and only tested on pages without scroll, not realizing that the footer was breaking. Essentially, it broke the layout on scrollable pages because the footer wasn't following the page's flow correctly.

To fix this, I removed the position: absolute from the footer and used alignSelf: "flex-end" to ensure that it always stays at the bottom of the layout. In the parent component, I added display: "grid" and minHeight: "100vh" to ensure that the structure occupies the full height of the screen.

Additionally, I wrapped the other components inside a Box, making sure they are treated as a single unit within the grid. This way, the elements stay grouped correctly without being stretched unexpectedly.

fixes #1809

before:


after:


I am testing on other pages too

Type of change

• Bug fix (non-breaking change which fixes an issue)

Testing

Basically, test both scrollable and non-scrollable pages